import React from "react";
import { connect } from "react-redux";
import { Menu, Dropdown, Modal, Layout, Avatar, Tooltip } from "antd";
import  * as Icon from '@ant-design/icons';
import { Link } from "react-router-dom";
import { logout, getUserInfo, toggleSettingPanel } from "@/store/actions";
//import FullScreen from "@/components/FullScreen";
//import Settings from "./Settings";
import Hamburger from "@/components/Hamburger";
//import BreadCrumb from "@/components/BreadCrumb";
const { Header } = Layout;

const LayoutHeader = (props) => {
	const {token,avatar,name,sidebarCollapsed,toggleSettingPanel,showSettings,logout,getUserInfo,fixedHeader,} = props;
	token && getUserInfo(token);
	const handleLogout = (token) => {
		Modal.confirm({
			title: "注销",
			content: "确定要退出系统吗?",
			okText: "确定",
			cancelText: "取消",
			onOk: () => {
				logout(token);
			},
		});
	};
	const onClick = ({ key }) => {
		switch (key) {
			case "logout":
				handleLogout(token);
				break;
			default:
			break;
		}
	};
	const menu = (
		<Menu onClick={onClick}>
			<Menu.Item key="0">
				<Link to="center">
					{
					  React.createElement(
					    Icon['UserOutlined'],
						{
						  style:{ marginRight: '10px' }
						}
					  )
					}
					<span>个人中心</span>
				</Link>
			</Menu.Item>
			<Menu.Item key="1">
				<Link to="settings">
					{
					  React.createElement(
					    Icon['SettingOutlined'],
						{
						  style:{ marginRight: '10px' }
						}
					  )
					}
					<span>账户设置</span>
				</Link>
			</Menu.Item>
			<Menu.Item key="2" disabled>
				{
				  React.createElement(
				    Icon['SettingOutlined'],
					{
					  style:{ marginRight: '10px' }
					}
				  )
				}
				<span>测试</span>
			</Menu.Item>
			<Menu.Divider />
			<Menu.Item key="logout">
				{
				  React.createElement(
				    Icon['LogoutOutlined'],
					{
					  style:{ marginRight: '10px' }
					}
				  )
				}
				<span>退出登录</span>
			</Menu.Item>
		</Menu>
	);
	const computedStyle = () => {
		let styles;
		if (fixedHeader) {
			if (sidebarCollapsed) {
				styles = {
					width: "calc(100% - 80px)",
				};
			} else {
				styles = {
					width: "calc(100% - 256px)",
				};
			}
		} else {
			styles = {
				width: "100%",
			};
		}
		return styles;
	};
	return (
		<div className="header-animat sidemenu">
			{/* 这里是仿照antd pro的做法,如果固定header，
			则header的定位变为fixed，此时需要一个定位为relative的header把原来的header位置撑起来 */}
		  
			{fixedHeader ? <Header /> : null}
			<Header style={computedStyle()} className={fixedHeader ? "ant-header-fixedHeader" : ""}>
				<div className="header">
					<Hamburger />
					<div className="user-wrapper">
						<div className="content-box">
							{showSettings ? <div className="settings-container">
      <Tooltip placement="bottom" title="系统设置">
        {React.createElement(Icon['SettingOutlined'], {
          	onClick: toggleSettingPanel,
        })}
      </Tooltip>
    </div> : null}
							<Dropdown overlay={menu} className="user-dropdown-menu-wrapper">
								<span className="action ant-dropdown-link user-dropdown-menu">
									<Avatar className="avatar" shape="square" size="small" src={avatar} />
									<span>{name}</span>
								</span>
							</Dropdown>
						</div>
					</div>
				</div>
				{/* <Hamburger />
				<BreadCrumb />
				<div className="right-menu">
					<FullScreen />
					{showSettings ? <Settings /> : null}
					<div className="dropdown-wrap">
						<Dropdown overlay={menu}>
							<div>
								<Avatar shape="square" size="medium" src={avatar} />
								{
									React.createElement(
										Icon['CaretDownOutlined'],
										{
											style:{ color: 'rgba(0,0,0,.3)' }
										}
									)
								}
							</div>
						</Dropdown>
					</div>
				</div>*/}
			</Header>
		</div>
	);
};

const mapStateToProps = (state) => {
	return {
		...state.app,
		...state.user,
		...state.settings,
	};
};
export default connect(mapStateToProps, { logout, getUserInfo, toggleSettingPanel })(LayoutHeader);
